-
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.
-
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)
-
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.
-
- 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 thecontainer
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.
- This means that all the styles (css) that Bootstrap assigns to
- 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.
- We will be using the id
- If this is all very confusing, don't worry. It will make more sense when we get to the React setup.
- The
- Step 1.
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render()
is supplied with arguments inside of its parentheses. The first argument must be anelement
, and the second must be a specifiedcontainer
(or "wrapper") found in the DOM. ReactDOM will render theelement
inside of the specifiedcontainer
.- 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.
- Step 3.
- Here we are setting up the foundation of our
<App />
component.- The syntax
class App extends React.Component
andrender()
is written in ES6. We're using Babel to compile our ES6 (modern JavaScript to browser-compatible JavaSciprt) The syntaxclass 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.
- The syntax
- Here we are setting up the foundation of our
- 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).
- 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.
- We are writing JSX here, which in this case is basically HTML inside of our javascript file. We are using the standard HTML
- 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).
- 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 asuperclass
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 keywordthis
to understand the scope of our classApp
. We will needsuper
to understand whatthis
is referring to.super
effectively initializesthis
. - Just know that you need
super()
in a React ES6 constructor in order to declare your initial state.
- The most important thing to know about the word
- 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.
- note we could also use a React
- 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.
- We know that our input field is receiving text. Where should we store the text we receive from the input? In the state.
- 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'sinputValue
. We writethis.state.inputValue
to access theinputValue
in thethis.state
JSON object.
- 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
- 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 ourhandleInputChange
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 hereBinding is one of the trickier concepts to understand. Basically, we need to tell our function what the JavaScript keyword
this
is referring to. We wantthis
to refer to the component, so we bindthis
. Here is a nicely written explanation of binding functions in React.
- Step 7. Read more about JSX at the official React documentation.
-
Step 1.
Here we are setting up the
todos
state as an empty list. This is being represented by an emptyarray
. An array in JavaScript is denoted by square brackets[]
.
-
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
andid
, as they are the properties of our todo items. Thetext
key's value will be the state of theinputValue
that is present in the input field on button click. The todoid
will increment from its original value0
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 theonClick
HTML attribute to call JavaScript when our<button>
is clicked. Once again, we writeonClick
instead ofonclick
in React, since the JSX component syntax expects camelCase.
-
Step 3.
A
ul
unordered list is an HTML bulleted list. Insideli
list item elements can be defined.
-
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.