Have you went through the official React’s Tic Tac Toe tutorial? If you have, you might notice this text in the introduction bolded You might be tempted to skip it because you’re not building games — but give it a chance. I’m guessing even React team knows that it’s not that interesting to build a Tic Tac Toe game, since they put that line in. While the project indeed gives you an understanding of React, you’ll need a strong will to process the tutorial. Now don’t get me wrong, I’m grateful for this introduction project, but I just it. If you’re thinking the same thing, I’m going to write about alternative projects that you can build to learn React in this tutorial. don’t like So what front-end projects you can pick up to learn about React? As I went through tutorials and blog posts, I noticed a good introduction tutorial for React must do these things: Teach the fundamentals of React like components, state and props Handling dynamic data, changes in state and props Shows the use of lifecyle method Well, almost everything from the tab, really. main concepts Core React knowledge right in this tab! By the end of this tutorial, you will have a better understanding of the uses of React concepts like components, state and lifecycle methods and how they are used in common web application UI. Table of Contents Front-end fun with list of cards Getting Complex With Wizard Form GitHub Search App Conclusion Note: For the CSS part of this tutorial, we’ll use Bootstrap to make it look nicer without writing our own CSS. You can safely ignore the _className_ parts of the sample code, since they are from Bootstrap Front-end fun with list of cards Let’s start with utilizing JSX, components and props — the basic ingredients of a React UI. Here is our final product: A list of cards with React So let’s build it. All we have to do is to create the Component which returns JSX elements: <Card/> function Card(props) {return (<div className="card"><img className="card-img-top"src=" "alt="cap image" /><div className="card-body"><h5 className="card-title">Title Placeholder</h5><p className="card-text">Description Placeholder</p><a href="#" className="btn btn-primary">Learn more</a></div></div>);} https://via.placeholder.com/600x250.png And then create a parent component that renders three times. We can name it <Card/> <CardList/> function CardList() {return (<div className="row"><div className="col-sm-4"><Card /></div><div className="col-sm-4"><Card /></div><div className="col-sm-4"><Card /></div></div>);} Don’t forget to add the call at the bottom of the code. This is the code responsible for bringing our React application into our HTML element. ReactDOM.render ReactDOM.render(<CardList />, document.getElementById('root')); Next, we need to include our own data into these cards, so pass some into it. props function CardList() {return (<div className="row"><div className="col-sm-4"><Card **"** /></div><div className="col-sm-4"><Card// your data/></div><div className="col-sm-4"><Card// your data/></div></div>);} featureImage=" https://sebhastian.com/static/eb0e936c0ef42ded5c6b8140ece37d3e/fcc29/feature-image.png "title="How To Make Interactive ReactJS Form"description="Let's write some interactive form with React"link=" https://sebhastian.com/interactive-react-form And then use these props in our component: <Card/> function Card(props) {return (<div className="card"><img className="card-img-top" src= alt="cap image" /><div className="card-body"><h5 className="card-title"> </h5><p className="card-text"> </p><a href= className="btn btn-primary">Learn more</a></div></div>);} {props.featureImage} {props.title} {props.description} {props.link} Now this component used JavaScript in its JSX, pretty similar to templating engines, isn't it? <Card/> You might be wondering, “why do we use instead of for declaring component?” function class Because we don’t keep or use lifecycle methods. React components are declared as a in order to use those two things (although now we can do it with React hooks as well, but we'll leave hooks out for now.) state class As we can see in the example, React’s UI are made of three basic ingredients: components, JSX and props. is a single piece of UI made out of methods and JSX. Component is HTML supercharged with JS, enabling us to describe UI using JavaScript syntaxes. JSX are arbitrary inputs that we pass down into a component. Props There really is not much more we can learn from this simple static cards except basic UI patterns, so let’s move on to a more complex task. Getting Complex With Wizard Form In this second exercise we will build a wizard form, which is a multi-step form designed to ease the filling process for a long and complex form. By only showing a few inputs on a screen, users will feel encouraged to fill the blank inputs rather than feeling overwhelmed and potentially abandoning the form. Let’s take a look at how you can build a form like this with React: React wizard form The easiest way to create a multi step form is to create a container form component, which contains all the wizard step component inside of it. This diagram will help you understand it clearly. React wizard form diagram Although it seems to be more complex than a regular form, a wizard form still use the same React principle. But since we have in this exercise, we need to include a new principle: state is used for storing dynamic data State Instead of having one form component, we will have one parent component and three child components. In the diagram above, component will send data and functions to children components via props, and children components will trigger function to set values in the of . We'll need a function to move the form from one step to another as well. <MasterForm/> handleChange() state <MasterForm/> Just like how send props to , These children components will receive props from for and props. CardList Card <MasterForm/> value onChange component will render email address input <Step1/> will render username input <Step2/> will render password input and a submit button <Step3/> The parent will supply both data and function into child components, and child components will pass user inputs back to the parent using its . <MasterForm/> props First, we’ll create the form children components. This example will only include one input per form step. The comments will show the use of . props function Step1(props) {if (props.currentStep !== 1) {return null}return(<div className="form-group"><label htmlFor="email">Email address</label><inputclassName="form-control"id="email"name="email"type="text"placeholder="Enter email" /></div>)} value={props.email} // props from parentonChange={props.handleChange} // props from parent Since the child components look almost similar between one another, I’m just showing one of them above. You can take a look at the demo for the full code. Notice how we used instead of , since we don't use or lifecycle methods. function class state Then we can put this child component into the master form function and pass in the necessary props. To handle events in which user type something into the text, we used the synthetic event, which is a part React core libraries for handling events. More details . render() onChange here Let’s make the component and initialize its state and methods. A state will be initialized with the value of 1. This is used for step indicator so our form knows on what step we are currently. We'll use ES6 class since need local state for this component: <MasterForm/> currentStep class MasterForm extends React.Component { constructor(props) {super(props)this.state = {currentStep: 1,email: '',username: '',password: '',}} // creating functions with ES6 arrow function syntax handleChange = event => {const {name, value} = event.targetthis.setState({[name]: value})} handleSubmit = event => {event.preventDefault()const { email, username, password } = this.statealert(`Your registration detail: \nEmail: ${email} \nUsername: ${username} \nPassword: ${password}`)} // render method here...} Next, we add the steps in the render method of . It will send function and required values as props, note the highlighted code blocks: <MasterForm/> handleChange() state render() {return ( <h1>A Wizard Form!</h1><p>Step {this.state.currentStep} </p> <React.Fragment> <form onSubmit={this.handleSubmit}> {/\* render the form steps and pass required props in \*/} **<Step1currentStep={this.state.currentStep}handleChange={this.handleChange}email={this.state.email}/><Step2currentStep={this.state.currentStep}handleChange={this.handleChange}username={this.state.username}/><Step3currentStep={this.state.currentStep}handleChange={this.handleChange}password={this.state.password}/>** </form> )} </React.Fragment> Because must return a single element, the component lets you return multiple elements in a render() method without creating an additional DOM element. More details . render() <React.Fragment> here Then we add the next or previous step function, which will check if the current step has a previous or next step. If it is, it will push up or down: currentStep class MasterForm extends React.Component {/** Test current step with ternary* _next and _previous functions will be called on button click*/ _next = () => {let currentStep = this.state.currentStepcurrentStep = currentStep >= 2? 3: currentStep + 1this.setState({currentStep: currentStep})} _prev = () => {let currentStep = this.state.currentStepcurrentStep = currentStep <= 1? 1: currentStep - 1this.setState({currentStep: currentStep})} // ... the rest of the code We’ll make functions that will check whether the current step is 1 or 3. This is because we have 3 step wizard form. You can change them if you have more. The buttons will disappear if there is no next or previous step from the current step. These buttons will call on our and methods. _next _previous /** the functions for our button*/previousButton(){let currentStep = this.state.currentStep;if(currentStep !==1){return (<buttonclassName="btn btn-secondary"type="button" onClick= >Previous</button>)}return null;} {this._prev} nextButton(){let currentStep = this.state.currentStep;if(currentStep <3){return (<buttonclassName="btn btn-primary float-right"type="button" onClick= >Next</button>)}return null;} {this._next} All that’s left is to render our next and previous buttons /** add buttons to our form in render*/render(){return(<form onSubmit={this.handleSubmit}>{/*... other codes*/} **{this.previousButton()} {this.nextButton()}** </form> )} If you’re wondering why we used on the call to buttons above, that's because we need to actually execute the button functions. The and functions are only executed on button click, hence they musn't have on the call. () _next _previous () Phew! There’s a lot of interactions between component and state here, but I hope by now you get to understand the use of in React application. To summarize, is just arbitrary data we defined in a component, and it becomes a part of that component forever. We can pass it down to another component, we can update it, and we can do conditional stuff based on what state our component currently is in. state state In this sample form, we have used state for keeping track of user’s inputs and the current step of the wizard form. Since React is a one-way data flow from parent to child component, always remember that only the owner of the can mutate or update it. state To use we can use ES6 Class or React Hooks (will be explained in another tutorial.) state Still up for another exercise? Let’s do it then! P.S: If you are working on react form, you might wanna check out this in depth tutorial by Arinich GitHub Search App Now for our third exercise, let’s actually use some ES6 features to get data from GitHub API and display its results. This exercise will include all the things we learned from previous projects and new ones: and . lifecycle methods rendering lists Simple GitHub search app Note: There are extra css that I wrote for this app. Make sure to visit the CSS tab of the codepen above and paste it if you’re not forking the pen First, let’s explore about Github API that we’re going to . Since we’re only searching by username, we need this API url: use https://api.github.com/search/users?q={--search-string--} Let’s get ready to build the app by writing the big header component first. It’s just static Bootstrap Jumbotron actually: const Header = () => {return (<div className="jumbotron"><h1>Github Search App</h1><h2>Search users in GitHub using this simple React application.</h2><p>Click on the card to see more detail about individual user. The search default is nsebhastian (me!)</p></div>);}; Now let’s think about making the input form. We’re going to need: A search form Calling Github API when search form is submitted Display search result in a list of cards We’ll start with declaring the API constant const API = 'https://api.github.com/'; Then let’s initialize the “top” component with two state values: the and . searchText data class App extends React.Component {constructor(props){super(props);this.state = {searchText: 'nsebhastian',data: '',}} fetchSearch = username => {let url = `${API}search/users?q=${username}`;fetch(url).then((res) => res.json() ).then((data) => { }).catch((error) => console.log('Oops! . There Is A Problem' + error) )} this.setState({data: data}); componentDidMount() {this.fetchSearch(this.state.searchText);} function will fetch data from the API url, transform it into JSON object, then update our state with the freshly fetched data. It will be called in a component lifecycle method . If you're not familiar with lifecycle methods, they are basically methods run on a particular times in the process of constructing and rendering components. There are other methods beside , including method. Not all lifecycle methods are used frequently, some of them will be used more often than the rest. fetchSearch data [componentDidMount](https://reactjs.org/docs/react-component.html#componentdidmount) componentDidMount constructor Let’s continue with our app by writing the method of component: render App render() {return (<div><MyHeader /> </div>);} <SearchFormfetchSearch={this.fetchSearch}/><Profilesdata={this.state.data}/> You might’ve guessed it by seeing the code that we need to create two more components, namely and . <SearchForm/> <Profiles/> Let’s start with the . We have written form in React before, so this won't be hard. We just need a single text input and a submit button. Also, let me show you another way of getting input value without using : <SearchForm/> state class SearchForm extends React.Component {render() {return (<div className="search-bar"><formclassName="input-group" ><inputtype="search"ref="username"placeholder="Type Username here"className="form-control"/><span className="input-group-btn"><button type="submit"className="btn btn-warning">Submit</button></span></form></div> onSubmit={this.handleForm} )} handleForm = event => {event.preventDefault();let username = this.refs.username.valuethis.props.fetchSearch(username);}} As you can see, we are getting username value by using . This way we don't need to initialize at all. We have to use ES6 class for declaring the component, since we need to write the function. ref state handleForm Now it’s time to write the final component . I will use this opportunity to show you component declaration — . <Profiles/> arrow function style Profiles = props => {if(props.data){let data = props.data; if (data.message === 'Not Found')return (<div className="notfound"><h2>Oops !!!</h2><p>The Component Couldn't Find The You Were Looking For . Try Again </p></div>); }else {return <div>Fetching data . . .</div>}} else{// map the users into JSX elementslet userList = data.items.map((name) => {return (<a key={name.id} href={name.html_url} target="blank"><div className="bs-callout bs-callout-info"><img className="user" src={name.avatar_url} alt={`${name.login}`}/><h4>Username : {name.login}</h4><p> Url : {name.html_url}</p><p> Score : {name.score} </p></div></a>);})// then render itreturn (<div>{userList}</div>);} If you’re following this tutorial from the start, I think you can understand what this component do. It will accept named data from its parent, then do something based on that props. We used the function to iterate and write JSX elements from the array. Then it's simply returned for rendering. <Profiles/> props map data Notice how a props is passed into the element so that React can identify individual element in the list. More detail . key <a> here Now you can search and click on the result to be taken to the GitHub user profile. Great job coming this far! We can actually improve the app by using React Router and create user page for a detailed view of individual user, but let’s call it a day for now and go for when we actually learn about React Router. React Router refactoring Conclusion We’ve build three exercise projects to learn about React fundamentals, starting from a simple, static cards list, to a more complex React application that fetch data from GitHub API and display it. We also learned about dynamic data management using . state The take away from these tutorials are simple and reuseable React patterns that you’ll see in almost any React app: is a single piece of UI made out of methods and JSX. Component is HTML supercharged with JS, enabling us to describe UI using JavaScript syntaxes JSX are arbitrary inputs that we pass down into a component. Props is used for storing dynamic data. We can use it for rendering UI and storing fetched data State are used for methods that need to be called on component render. The easiest example is for calling API and fetching data Lifecycle methods So how was it? Isn’t it more fun learning React by actually building pieces of components you’re more likely to use in your projects? Is it too hard for you? Please give me feedback so I can improve my writing skill. I’ll be covering more about React soon — like using Hooks or React router — so if you’re interested in that, be sure to stay tuned by following me or to my newsletter. I promise not to spam your inbox! subscribe Thanks for reading 🙌 Originally published at sebhastian.com
