dankreiger/react_js_intro.md Secret

## react_js_intro.md

      
    Raw
  

              react_js_intro.md
            
          
    A beginner’s introduction to Facebook’s React.js JavaScript Library

tutorial link

Part I: Configuration


Step 1. Wikipedia

CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, creatively named "pens", and test them.


Step 3. What is JavaScript?


Step 4. What's a preprocessor?


Step 5.

What exactly is BabelJs? Why does it understand JSX/React components?
ECMAScript
Babel


Step 8. Check out the official React Documentation from Facebook.


Step 10. ReactDOM is the library that connects React to the DOM (Document Object Model).

We can't understand ReactDOM until we first understand the DOM itself.
We can't understand the DOM until we understand HTML.

Here are some useful links:

What is HTML? - Mozilla
What is HTML? - Lifewire
What is the DOM? - Mozilla
What is the DOM? - CSS Tricks


Step 11. The links on your screen load external javascript files into your project. In this case we are using javascript files from the React and ReactDOM libraries. The links allow us to use React and ReactDOM. These links are often referred to as CDNs (Content Delivery Networks)

more info


Step 12. CSS stands for Cascading Style Sheets. CSS is used to apply styling to our HTML - What is CSS?


Step 15. Bootstrap is a front-end open source framework that allows us to quickly style websites and web apps. Bootstrap gives us solid styles right out-of-the-box, and it makes our projects viewable on any screen size or device (i.e. responsive-design). Here we are using Bootstrap version 4.


Step 16. The link added here is a CDN (mentioned in step 11) that loads Bootstrap's core style sheets (css) into our project. This link gives us access to Bootstrap.


Step 17. We have three windows. One for HTML, one for CSS, and one for JavaScript (JS).


We use HTML to add content and structure to our project.


We use CSS to style our project.


We use JavaScript to add behavior to our project.


Check out this 4 minute video that explains HTML, CSS, and Javscript


In React we work mostly in JavaScript using JSX (JavaScript XML). JSX is similar to HTML, but it is even more similar to XML.

What is the difference between XML and HTML?


Part II: HTML Setup


Step 1.
<div class="container" id="root"></div>

The <div> tag allows us to divide our HTML into defined sections or divisions.
The class container in our <div> is a pre-defined Bootstrap class.

This means that all the styles (css) that Bootstrap assigns to container will be used in our project.
All content inside of the <div>s with the container class will respond to any screen size.
This means that our content will adjust its size to be viewable on all sorts of screens and devices.


We are using the word "root" for our <div> id. HTML ids are used to uniquely identify an HTML element.

We will be using the id root as a unique word that ReactDOM can target in our HTML.
ReactDOM will render our React code to the DOM inside of the <div> marked with the id "root".
Note that the word "root" is arbitrary. We could use any word as an identifier.


If this is all very confusing, don't worry. It will make more sense when we get to the React setup.

HTML <div> tags
HTML class
HTML id
Bootstrap's container class


Part III: Create  React Component


Step 1.
ReactDOM.render(<App />, document.getElementById('root'));

ReactDOM.render() is supplied with arguments inside of its parentheses. The first argument must be an element, and the second must be a specified container (or "wrapper") found in the DOM. ReactDOM will render the element inside of the specified container.

What's a container tag in HTML?


In our example, we will be rendering an element called <App />, which is a React Component that we will be defining. <App /> will be our top level component, and it will encapsulate all of our React code (and child components).
If this is confusing, it will make more sense when we start coding, and even more sense with practice. Note that coding is always confusing, but it makes more sense over time.

Thinking in React
React Components Explained
Components and Props


Step 3.

Here we are setting up the foundation of our <App /> component.

The syntax class App extends React.Component and render() is written in ES6. We're using Babel to compile our ES6 (modern JavaScript to browser-compatible JavaSciprt) The syntax class App extends React.Component is used to declare React stateful aka "smart" components.
Too much info (if it all doesn't make sense, that makes sense).
Just know that we will be using React state inside of this component (hence the name "stateful" component)
React state can be a very tricky concept to grasp. If it doesn't make sense at first, just keep practicing with it. It's worth understanding because it is at the heart of React's uniqueness.
Here we are rendering the word "hi" to the DOM.


Step 4.

You should now see the word "hi" in your project preview window.
This is the step where most coders would write "Hello World!" I am just going to write "hi."

The reason is that you've come a very long way at this point only to see one word being rendered to your screen. For me, this isn't all that climactic. But for people who are more positive than I am, perhaps this is exciting.
Try changing the word "hi" to any word (or words) you want. You will see your React content being rendered to the screen via ReactDOM.
If you're comfortable with HTML, try writing some HTML inside of the <div> tags.
Once again, this is all very confusing and difficult at first. However, it's definitely worth understanding. Just keep practicing it over and over again until it makes sense (and if it still doesn't make sense, practice some more).


Part IV: Setup Input Field And Button


Step 1.
<input />
<button>+</button>

We are writing JSX here, which in this case is basically HTML inside of our javascript file. We are using the standard HTML <input /> and <button> tags to make an input field (that accepts input from the user) and a clickable button. We will fill in the input field with some text (a todo list item), and we will use the button to add that text to our list.


Step 2.

Similar to step 4 in part III, we are now seeing our content being rendered to the DOM. You can enter text in the input field and click the button (unfortunately nothing will happen yet, but it would be nice if it did).


Part V: Set up constructor with initial component state


Step 1.
constructor(){
  super();
  this.state = {
    inputValue: ''
  }
}

This is where things start to get really tricky.
Here we are making a constructor for our React stateful component. Inside of the constructor we will define our initial state. This is what sets up the state in our stateful component.
Don't worry about the super() syntax right now. If you're curious, you can read more here.

The most important thing to know about the word super in coding is that it references  a superclass or some sort of inherited information from a parent resource. In order for us to set our initial state, we will need to use the javascript keyword this to understand the scope of our class App. We will need super to understand what this is referring to. super effectively initializes this.
Just know that you need super() in a React ES6 constructor in order to declare your initial state.


In our constructor, we need to define our initial state.

We know that our input field is receiving text. Where should we store the text we receive from the input? In the state.

note we could also use a React ref to reference the HTML input value, but let's use state since React is all about understanding state.


The initial state of our input is empty, so we set our initial state to empty quotes '' aka "an empty string."
Therefore, we have the inputValue: '' line in our initial state declaration.


Part VI: Assign state value to input field


Step 1.
<input value={this.state.inputValue} />

Here we assign input value to our HTML input field. What should the value of our input be? If we want to set it to the inputValue in our state, it should be the state's inputValue. We write this.state.inputValue to access the inputValue in the this.state JSON object.


Part VII: Assign function to input field to update the component state


Step 1.

  handleInputChange(event){
    this.setState({ inputValue: event.target.value })
  }
setState is a React function that sets the state of the component. We are passing our handleInputChange function an event, which will have a target of the input, which will have a value.


Step 3.

  <input onChange={this.handleInputChange} value={this.state.inputValue} />
The HTML onChange event attribute executes JavaScript whenever content of the input field is changed. Note that React DOM elements expect camelCased attributes, which is why we write onChange instead of onchange in our React components.
Here we are calling this.handleInputChange because we want to use the function handleInputChange in our component. this will be bound to our component context scope in step 5.


Step 5.
Here we are binding this from our handleInputChange function to the context of the component. There are suggested ways of avoiding this binding, but for the purposes of this tutorial, we will bind the function to the component context. Binding is a more advanced JavaScript topic, but you can read about it here
Binding is one of the trickier concepts to understand. Basically, we need to tell our function what the JavaScript keyword this is referring to. We want this to refer to the component, so we bind this. Here is a nicely written explanation of binding functions in React.


Step 7.
Read more about JSX at the official React documentation.

Part VIII: Update constructor to handle the state for todos


Step 1.
Here we are setting up the todos state as an empty list. This is being represented by an empty array. An array in JavaScript is denoted by square brackets [].


Part IX: Apply a function that adds todo items when you click on the add button


Step 1.
Here we are setting an id variable inside the browser's window object. We will use this to assign ids to our todo items later.


Step 3.
  addTodo(){
    const todo = { text: this.state.inputValue, id: window.id++ }
    this.state.todos.push(todo);
    this.setState({ todos: this.state.todos, inputValue: '' })
  }    
Everytime we add a todo item, we will set a constant to the new todo object (denoted with curly brackets). The object allows us to set up our own data (i.e. keys and values). Our object keys will be text and id, as they are the properties of our todo items. The text key's value will be the state of the inputValue that is present in the input field on button click. The todo id will increment from its original value 0 by 1, which we can do using the ++ syntax.


Step 5.
  <button onClick={this.addTodo}>+</button>
Similarly to the onChange HTML attribute from step VII part 3, here we are using the onClick HTML attribute to call JavaScript when our <button> is clicked. Once again, we write onClick instead of onclick in React, since the JSX component syntax expects camelCase.


Part X: Update view to show todo list


Step 3.
A ul unordered list is an HTML bulleted list. Inside li list item elements can be defined.


Part XI: Organize the code into separate components


Step 2.
Our TodoList component will not need a component state, and therefore we can make it a stateless component. Read more here about stateless components and why they are beneficial.