Building React Application from Scratch

Before I start explaining how to start the project I would to explain briefly what is React? React is a JavaScript library that is used to produce HTML that is shown to user in a web browser. When writing React code we are actually writing individual components or views. Component are snippets of code that produce HTML code. So basically we are nesting those components together by placing one inside the other to make complex application simple. A component is a collection of JavaScript functions that produce HTML ultimately.

Here is a sample of my work that I included in the index.js which is inside the folder src.

const is ES6 to declare a variable or constant that will never going to change. The web-pack and bubble will do trans-piling of the code before running in the browser and will return the div with the word “Hi!” once it is declared. JSX is the stuff that declared similar to HTML. The function is assigned into the constant App. I used constant instead of var because I am not expecting this variable to ever change. The JSX cannot be interpreted into the browser. So the purpose of the boilerplate web-pack and babel is to translate this JSX into actual Vanila JavaScript. We use JSX because it will render the HTML that get inserted into the DOM when we render the component into the page.

Now we have to call the React library and ReactDOM in order to instantiate it into the application dependency and assign to the variable.

Since we had an error rendering the reactDOM because we had to make an instance of the App variable by wrapping it in JSX tag and passing it into ReactDOM.render. Like this: ReactDOM.render(<App />);

Now I am passing reference to the container. So it is saying go find the div with class container, then try to render the app container.

Here is the final code of the index.js in order to produce “Hi!” HTML code on the browser. On the next section I will go over some more components in order to build Youtube Mockup with React.

Thank You!!!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.