Getting Started with React - Front End Dev
Getting started with learning a new coding language is daunting. The over arching feeling felt by beginners is not knowing where to begin. This post will introduce you to the steps I take when beginning to learn a new language and show you an example of how to apply your new found knowledge to the development of your own application or website.
Step 1)
Pick a language to investigate. Ask yourself what it is you want to acheive and then understand which language is appropriate to meet your goals. See example below:
Develop Static Website (Front-end): HTML, CSS
Develop Dynamic Website (Front-end): jQuery, AngularJS, ReactJS
Develop Database Driven Website (Back-end): PHP, Python, NodeJS, Ruby
Develop Website with a Framework: Zend or Laravel (PHP), Python (Django), Spring MVC (Javscript)
Notes:
A static website is a website that presents content as specified in the code without any modification after the page loads. A dynamic website is a website that has elements on the page that move or change without page having to reload. A database driven website is a website that fills the content of its page from the data stored within a database as opposed to the content hard-coded in the code. A framework is a skeleton application that guides you on how to efficiently code and segregate your application into different modules and pages. Frameworks enable you to rapidly develop your ideas without worrying about the underlying architecture of your code (where you place your files and how those files can communicate with one another).
Today
We are looking at learning ReactJS for developing a dynamic website user interface on a website's "front-end" (the part of the website everyone see's and interacts with!)
What is react?
React is a "front-end" coding language developed by Facebook software engineers to make building user interfaces easier and more efficient. The code is structured in a compartmentalized fashion by creating "components" that can be reused as needed by your application.
Step 2)
Visit the getting started page of your selected language. Locate the first tutorial that you can find (commonly called "Hello World" tutorial) and try to understand how they have been able to acheive an output on the screen based off the code they've written.
The link to ReactJS Hello World tutorial is below:
https://facebook.github.io/react/docs/hello-world.html
A link to an online ReactJS editor to see the results of your coding, LIVE:
https://jsfiddle.net/reactjs/69z2wepo/
When reading through the documentation, pay close attention to the key concepts presented and what their recommended conventions of coding are. Without understanding these concepts, your development will be slowed significantly. Take the time to digest what they present and use an online editor to rapidly test these concepts.
Here is a list of things I learnt from the ReactJS documentation prior to writing any code:
- ReactJS is a javascript library - You must have an understanding of Javascript to begin with (see this link if needed https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
- You can insert HTML components into React (JSX) variables like so:
const element = <h1>Hello, world!</h1>;
- JSX code compiles back into regular javascript objects. Prior to compilation, you can use JSX to your advantage to return different HTML elements based of particular criteria. See below of JSX function example where a user name is rendered if a user exists, otherwise "Hello Stranger" is returned to the front-end.
const user = 'Marty';
function getGreeting(user) {
if (user) {
return <h1>Hello, {user}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
- To render your javascript objects to the front-end you have to execute the following function and specify which HTML element to render the objects inside of
const elementToRender = <h1>Hello World</h1>;
ReactDOM.render(
elementToRender,
document.getElementById('root')
);
// Where root is the id of a div within your html:
<html>
<head>
<title>React Test</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="customReactScript.js" type="text/jsx"></script>
</html>
Step 3)
Look through GIT projects to see how community members have used your desired programming language to build their apps or projects. My google search criteria commonly consists of the following phrase: "git LANGUAGE boiler plate" and learn how the highest rated repositories have structured their code.
For react, I'd recommend cloning the repository below, following the set-up instructions and attempting to understand how the front end has been built based off the code presented.
git clone https://github.com/davezuko/react-redux-starter-kit
Step 4
Modify the code to observe changes in the front-end and play around until you gain confidence in how components interact with each other.
Stay tuned for my blog post taking you through a React App that interacts with financial exchange API's to present current exchange rates for different currency pairs.
Until then, time is precious, spend it coding!
Marty
What about writing php script that would output the same but it would be more sane and less semantic?