[article] - Why's React Native so promising? #1

carvallegro · 2018-02-21T21:54:17Z

No description provided.

aseigneurin · 2018-02-26T15:29:10Z

posts/why-is-react-native-so-promising.md

+
+Now this article is not an introduction to React. This is merely a gathering of the thoughts I had and discoveries I made during this project. React Native is very good and hopefully this article will bring more people to use it and help bring the framework to maturation.
+
+## React is **not** a framework. React Native is one.


Start titles at level 1

aseigneurin · 2018-02-26T15:30:47Z

posts/why-is-react-native-so-promising.md

+
+The most known Higher Order Function is the Redux `connect` function that allows you to bind the props of a "dumb" Component to the Redux Store. Here's a quick reminder of the function's profile:
+
+```


add the language on code snippets: javascript

aseigneurin · 2018-02-26T16:15:14Z

posts/why-is-react-native-so-promising.md

+
+I find that in the frontend world, lots of people compare Angular and React as if they were equals. But there's an important distinction, React is only a rendering library. Whereas Angular bundles a lot of features together, you will need to use a lot of different libraries to have equivalent functionality with React. Redux being the most popular state management library to use with React you'll ship them together, making the stack a kind of framework. I think it is important to know the difference and understand that you cannot really compare them.
+
+Enter React Native. React Native looks a lot like React: roughly the same syntax, classes, JSX, state, props...but React Native is a framework, which means you have more features than just rendering in React Native. And that's simply because React Native needs to interact with the mobile it's running on. To do that, the Facebook team created a bunch of APIs to interact with the camera, the keyboard, the vibrations...


"...but" -> "... but"

aseigneurin · 2018-02-26T16:16:26Z

posts/why-is-react-native-so-promising.md

+
+I find that in the frontend world, lots of people compare Angular and React as if they were equals. But there's an important distinction, React is only a rendering library. Whereas Angular bundles a lot of features together, you will need to use a lot of different libraries to have equivalent functionality with React. Redux being the most popular state management library to use with React you'll ship them together, making the stack a kind of framework. I think it is important to know the difference and understand that you cannot really compare them.
+
+Enter React Native. React Native looks a lot like React: roughly the same syntax, classes, JSX, state, props...but React Native is a framework, which means you have more features than just rendering in React Native. And that's simply because React Native needs to interact with the mobile it's running on. To do that, the Facebook team created a bunch of APIs to interact with the camera, the keyboard, the vibrations...


Add a link to React Native's website the first time the framework is mentioned

aseigneurin · 2018-02-26T16:26:43Z

posts/why-is-react-native-so-promising.md

+
+## React Native is a lot like React.
+
+As mentioned previously, in terms of "developer look and feel" React Native and react are very similar. You use classes, ES6, states and the like, with a few notable differences:


"react" -> "React"

aseigneurin · 2018-02-26T16:27:37Z

posts/why-is-react-native-so-promising.md

+
+### Redux works with React Native
+
+Not much to say here except that Redux, the React developers' favourite state management library, is also working with React Native with absolutely no difference in the way you'll dev.


"is also working" -> "also works" (?)

aseigneurin · 2018-02-26T16:29:03Z

posts/why-is-react-native-so-promising.md

+
+### You can do stateless components and use HOC in React Native
+
+Stateless components and High Order Components (HOC) are, for me, the revelation of the year. It allows a greater flexibility in your component creation and is way lighter than the use of React Component class inheritance. Coming from a backend world, I started React by using classes because that's what I'm used to (Java, guys, Java) and I didn't knew much about functional programming. It took a senior front-end dev to open my eyes on this wonder.


"what I'm used to" -> "what I'm used to using"
"Java, guys, Java" -> not sure what you mean!
"I didn't knew" -> "I didn't know"

I changed the sentence a bit to send the message differently

aseigneurin · 2018-02-26T16:31:33Z

posts/why-is-react-native-so-promising.md

+And, guess what, the best way to manage state in a stateless world is to use a Higher Order Component! Using the excellent [recompose](https://github.com/acdlite/recompose) library that provides a lot of React specific Higher Order Components, you can easily create reusable snippets for a lot of use cases. 
+
+Here's an example of a small Menu component: 
+<script src="https://gist.github.com/carvallegro/6167b34b0cdf9b6b19cb4358320d5856.js"></script>


Change the script to a normal link?

No this is to embed my gist into the page (avoid a huge bunk of code as it has scrolling and all)

aseigneurin · 2018-02-26T16:32:11Z

posts/why-is-react-native-so-promising.md

+
+#### Further reading
+
+I’m not here to talk about those but know they allow a greater flexibility around the way you compose your components and you can use them in React Native. This was only a short introduction of what HOCs are. If you want more information about it, here are just a few good article about it:


"but know" -> reformulate?

Reformulated

aseigneurin · 2018-02-26T16:35:26Z

posts/why-is-react-native-so-promising.md

+
+First of all, no, it is not a CSS in JS kind of library. It spits out CSS classes (with obfuscated class names). The main feature of this library is that it uses the power of ES6's string templates; you can use the component's props and state directly in its style and let style-component do its magic.
+
+Because the style-components dev team is awesome,~~they made it compatible with React Native with only one simple change~~ Because they're **really awesome** they improved the use for React Native in their 3rd major release by making it seamless. A single import will be compatible with React and React Native.


Missing "." before the second "Because"?

lower cased the B

aseigneurin · 2018-02-26T16:37:34Z

posts/why-is-react-native-so-promising.md

+
+## Dev environment (HMR…).
+
+My recommendation to avoid any hassle with the dev environment is to use the create-react-native-app package. It will generate a basic RN app with a default configuration; which is more than enough for most cases. If necessary, you can drop create-react-native-app at any time by running `npm run eject` but be careful, there's no going back! Keep that option away unless you really need to include your own native code.


create-react-native-app package -> add link?

aseigneurin · 2018-02-26T16:39:27Z

posts/why-is-react-native-so-promising.md

+
+## Who uses/contributes to React Native?
+
+As of today, [heaps of companies](http://facebook.github.io/react-native/showcase.html) are using React Native in production. Amongst them you can find Tesla, Instagram, Facebook, AirBNB, Skype, Wix...


"heaps" -> "lots"?

* kafka tutorial #1 * updated tags

carvallegro added 2 commits February 22, 2018 08:35

React Native article

963ed8f

syntax fix

da7dcdd

aseigneurin reviewed Feb 26, 2018

View reviewed changes

pplied feedbacks from aseigneurin

7cf960d

aseigneurin approved these changes Feb 27, 2018

View reviewed changes

aseigneurin merged commit 6023b60 into ippontech:master Feb 27, 2018

rlheritier mentioned this pull request Apr 6, 2018

Blog about AWS, our focus this year. #9

Open

aseigneurin pushed a commit that referenced this pull request Aug 1, 2018

kafka tutorial #1

4d49020

aseigneurin added a commit that referenced this pull request Aug 1, 2018

Kafka tutorial #1 (#33)

bfeabf3

* kafka tutorial #1 * updated tags

David-Elizondo pushed a commit to David-Elizondo/blog-usa that referenced this pull request Jul 21, 2023

Rough Draft ippontech#1

91cf2de

David-Elizondo mentioned this pull request Jul 21, 2023

Blog #402 (Kubernetes Tutorial #2: Cluster) #277

Open

David-Elizondo pushed a commit to David-Elizondo/blog-usa that referenced this pull request Jul 21, 2023

Update ippontech#1

3c9e716

NShaw6 added a commit to NShaw6/blog-usa that referenced this pull request Sep 8, 2023

Add AWS Glue Data Ingestion Draft ippontech#1

48642c7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[article] - Why's React Native so promising? #1

[article] - Why's React Native so promising? #1

carvallegro commented Feb 21, 2018

aseigneurin Feb 26, 2018

carvallegro Feb 27, 2018

aseigneurin Feb 26, 2018

carvallegro Feb 27, 2018

aseigneurin Feb 26, 2018

carvallegro Feb 27, 2018

aseigneurin Feb 26, 2018

carvallegro Feb 27, 2018

aseigneurin Feb 26, 2018

carvallegro Feb 27, 2018

aseigneurin Feb 26, 2018

carvallegro Feb 27, 2018

aseigneurin Feb 26, 2018

carvallegro Feb 27, 2018

aseigneurin Feb 26, 2018

carvallegro Feb 27, 2018

aseigneurin Feb 27, 2018

aseigneurin Feb 26, 2018

carvallegro Feb 27, 2018

aseigneurin Feb 26, 2018

carvallegro Feb 27, 2018

aseigneurin Feb 26, 2018

carvallegro Feb 27, 2018

aseigneurin Feb 26, 2018

carvallegro Feb 27, 2018


		Now this article is not an introduction to React. This is merely a gathering of the thoughts I had and discoveries I made during this project. React Native is very good and hopefully this article will bring more people to use it and help bring the framework to maturation.

		## React is not a framework. React Native is one.


		The most known Higher Order Function is the Redux `connect` function that allows you to bind the props of a "dumb" Component to the Redux Store. Here's a quick reminder of the function's profile:

		```


		I find that in the frontend world, lots of people compare Angular and React as if they were equals. But there's an important distinction, React is only a rendering library. Whereas Angular bundles a lot of features together, you will need to use a lot of different libraries to have equivalent functionality with React. Redux being the most popular state management library to use with React you'll ship them together, making the stack a kind of framework. I think it is important to know the difference and understand that you cannot really compare them.

		Enter React Native. React Native looks a lot like React: roughly the same syntax, classes, JSX, state, props...but React Native is a framework, which means you have more features than just rendering in React Native. And that's simply because React Native needs to interact with the mobile it's running on. To do that, the Facebook team created a bunch of APIs to interact with the camera, the keyboard, the vibrations...


		## React Native is a lot like React.

		As mentioned previously, in terms of "developer look and feel" React Native and react are very similar. You use classes, ES6, states and the like, with a few notable differences:


		### Redux works with React Native

		Not much to say here except that Redux, the React developers' favourite state management library, is also working with React Native with absolutely no difference in the way you'll dev.


		### You can do stateless components and use HOC in React Native

		Stateless components and High Order Components (HOC) are, for me, the revelation of the year. It allows a greater flexibility in your component creation and is way lighter than the use of React Component class inheritance. Coming from a backend world, I started React by using classes because that's what I'm used to (Java, guys, Java) and I didn't knew much about functional programming. It took a senior front-end dev to open my eyes on this wonder.


		#### Further reading

		I’m not here to talk about those but know they allow a greater flexibility around the way you compose your components and you can use them in React Native. This was only a short introduction of what HOCs are. If you want more information about it, here are just a few good article about it:


		First of all, no, it is not a CSS in JS kind of library. It spits out CSS classes (with obfuscated class names). The main feature of this library is that it uses the power of ES6's string templates; you can use the component's props and state directly in its style and let style-component do its magic.

		Because the style-components dev team is awesome,~~they made it compatible with React Native with only one simple change~~ Because they're really awesome they improved the use for React Native in their 3rd major release by making it seamless. A single import will be compatible with React and React Native.


		## Dev environment (HMR…).

		My recommendation to avoid any hassle with the dev environment is to use the create-react-native-app package. It will generate a basic RN app with a default configuration; which is more than enough for most cases. If necessary, you can drop create-react-native-app at any time by running `npm run eject` but be careful, there's no going back! Keep that option away unless you really need to include your own native code.


		## Who uses/contributes to React Native?

		As of today, [heaps of companies](http://facebook.github.io/react-native/showcase.html) are using React Native in production. Amongst them you can find Tesla, Instagram, Facebook, AirBNB, Skype, Wix...

[article] - Why's React Native so promising? #1

[article] - Why's React Native so promising? #1

Conversation

carvallegro commented Feb 21, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment