intro-to-react.md

Intro to react instructor notes

Objectives

• Create a react application from scratch
• Create a feedback loop that is useful in developing react applications
• Describe how CSS is added to an application
• Explain what JSX is
• Break an application into functional components
• Use .map to transform an object to JSX element
• Use props to pass information into components

Resources

Fork, clone, and install the following repo -> react-functional-components

How do you create a react application from scratch

• Install create-react-app -> npm install -g create-react-app
• Use create-react-app to create a react application -> create-react-app intro-to-react
• create-react-app will create a new folder with the the project name you created, also, it will create the following
  • npm project
  • git repository
• What modules does create-react-app add to a new react application?
• What scripts are added?
• How do you start a react project?

How do you create a feedback loop when developing a react application?

• What is contained the public/index.html file
• What is the entry point of the application? Where does the react application get attached to the DOM?
• What happens when you change something in the 'html' in src/App.js file?
  • Change some text

How does CSS get added to the application

• In src/index.js, how does css get added to the application?
• Add a background-color to a class in App.css

What is JSX?

• What is JSX used for?
  • Given the example given here -> https://babeljs.io/en/repl. Why do you think that JSX is useful?
• Start up the intro-to-react application
• How are classes added to JSX elements? Why is that different from regular HTML?
• How are inline styles added to JSX?

Important

JSX component names must always start with a capital letter. Otherwise, it'll get treated like a regular html element

How can react help to break application into components

• Visually break down an application into components
• The chart has been already been broken down into a component
  • Where is the Chart component defined?
  • How is the Chart component 'required' into App.js
  • How is the Chart component exported out of its own file?
• Create Functional components for the following
  • Navbar
  • Sidebar
  • Content

Use .map to transform an object to JSX element

• The data in the table is statically set. Use the following array found here to use data to dynamically render the table
  • Copy array to the Content component
  • Replace the table body with a javascript expression
  • use .map to transform the array of objects, to an array of JSX elements

Use props to pass information into components

• Create a component named TableRow, and add the necessary JSX to create a row
• In the Content components, in the .map, replace the contents of the callback function with the new component that you created
• Use JSX props to pass information from the Content component to the TableRow component