React Starter Kit — Part 1 (Introduction)
I am coding in Angular for almost two years, but I always keep hearing from fellow developers, at meetups, tech conferences and even bars “it's so easy in react” and I was completely clueless and replying just “Really!” or “May be”.
I was done with playing stupid, and thought of learning React myself to understand the differences. So let's start
What is React ?
- Javascript library (Not Framework)
- Built at Facebook (Easier to make large Single page applications)
- Promotes Functional programming
Who uses it?
Various market leaders use React in production to get insights in details pls refer this link https://github.com/facebook/react/wiki/Sites-Using-React
Which React we are going to use ?
I was lucky to start with React 16 (or React fibre). There are a lot of versions with minor changes. Few of it’s features are:
- Improved async rendering
- Return arrays of elements
- Better error handling
- Smaller file sizes
Many first movers notice huge performance improvements, but not much changes for developers.
React Syntax
Let's take a look at our sample index.html file, we have scripts links to react and react dom. The later is responsible for rendering everything to our page.
Here we just created a new react element using React.createElement, passed no properties and ‘Hello world’ as children. The second argument is the target element where you want to render this newly created element. Easy, right, so if you open above page in browser you will see ‘Hello world’ as output.
JSX Introduction
Everything is good for now, but consider where you want to render whole new complicated tags in loop like list (li) or tr etc. Then this way of creating element can go haywire. That's where JSX come into picture . JSX, or JavaScript as XML, is a language extension that allows you to write tags directly in your JavaScript.
But if we directly write below code in our existing file we will get an error coz we need to compile jsx to javascript.
<script type="text/javascript">ReactDOM.render(<h1></h1>,document.getElementById('react-container'))</script>
For compiling jsx, we are going to use in babel browser for now, and change the file like below.
Here we included cdn script version of babel, but it will be really slow. It's used for demo, later we will do it in a more efficient manner.
So, when the project goes bigger, it's tough to write React.createElement again and again. Then jsx is the great rescue for us.
ES6 — Class components
The main idea of react is component. We compose various components together to make a user interface.
Let's create our first component. For that we will use ES6 class.
We create a simple ES6 class naming HELLO and extend React.component. Inside we will write a must method named render method, which just return JSX. Later, we need to use this newly created component like below.
ReactDOM.render(<Hello></Hello>,document.getElementById('react-container'))
Please refer to the below code for whole file:
If you noticed, we also put id and class in our new react component. The only catch is we can't use class for css class inside the JSX, as it’s already used in defining ES6 class. So, we named it as className. Everything else is the same.
Stateless function component
Another way of creating component is by stateless component function. Our above example is just a class that returns UI or jsx. Our stateless function is also the same, it's a function that returns UI.
It's a very common syntax that you will see in a lot of react projects and documentation.
Properties
The next target is how we can pass some data, inside the stateless component that we just created. For that we have props . The only difference between the es6 component and stateless function component is that in former props are available like this.props and in later it is functional parameter.
Refer to the below gist to see actual implementation
State
Personally, I feel the state is one of the most important concepts of react. It’s like whenever the state changes the render function is called again.
To depict the implementation of state, we will create component by es6 class way and constructor to this new class
constructor(props) {super(props)this.state = {checked: true}}
Here we just pass our props to super and initialised the state with one key checked, that's all.
Now we will write another function to handle the changes in our state by just toggling the checked key in state.
handleCheck = () => {this.setState({checked: !this.state.checked})}
That's all easy peasy don’t loose the focus, it’s about to end
So, in the above code we just created a checkbox in the state full component & whenever we are changing the checkbox we are changing the variable storing this selection is state and updating the state.
And to verify, the render is called again whenever state is changed. We are actually displaying the message on screen which depends on checked and unchecked state of the checkbox.
Conclusion
This is the first of the three tutorials in React Starter . The idea behind this tutorial was to make you familiar with the idea of react before starting directly creating new project. The next we are going to create a full fledged project in react using the core concepts described in this article.
The next article link will be updated soon here.
